<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>图片轮换</title>
		<link rel="stylesheet" href="css/scroll.css">
		<script type="text/javascript">
			var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];

			var i = 1;

			function lun() {
				var pic = document.getElementById("photo");
				pic.src = imgs[i];
				numberijing();
				i++;
				if(i > 4) {
					i = 0;
				}
			}

			var l = setInterval("lun()", 2000);

			function repl(img) {
				var pic = document.getElementById("photo");
				i = v = img.innerHTML - 1;
				pic.src = imgs[v];
				numberijing();

			}

			function numberijing() {
				var p = document.getElementsByTagName("a");
				p[i].style.backgroundColor = "orange";
				for(var j = 0; j < p.length; j++) {
					if(j != i) {
						p[j].style.backgroundColor = "white";
					}
				}
			}

			function over() {
				clearInterval(l);
			}

			function out() {
				l = setInterval("lun()", 2000);
			}
		</script>
	</head>

	<body>
		<div class="scroll">
			<div id="num">
				<a href="#" onclick="repl(this)">1</a>
				<a href="#" onclick="repl(this)">2</a>
				<a href="#" onclick="repl(this)">3</a>
				<a href="#" onclick="repl(this)">4</a>
				<a href="#" onclick="repl(this)">5</a>
			</div>
			<img src="img/1.jpg" alt="图片" id="photo" onmouseover="over()" onmouseout="out()" />
		</div>
	</body>

</html>